<template>
  <div>
    <el-row class="layout">
      <el-card style="width: 100%; min-height: calc(100vh - 120px)">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- 商品图片 -->
          <el-table-column prop="img" label="商品图片" width="90">
            <template v-slot="scope">
              <img :src="scope.row.goodsImage" alt="" width="90" height="90" />
            </template>
          </el-table-column>
          <!-- 商品名称 -->
          <el-table-column label="商品名称" width="250">
            <template slot-scope="scope">{{ scope.row.goodsName }}</template>
          </el-table-column>
          <!-- 单价 -->
          <el-table-column prop="price" label="单价" width="80">
            <template slot-scope="scope">{{ scope.row.nowPrice }}</template>
          </el-table-column>
          <!-- 数量 -->
          <el-table-column label="数量" width="195" show-overflow-tooltip>
            <!-- 计数器 -->
            <template slot-scope="scope">{{ scope.row.number }}</template>
          </el-table-column>
          <!-- 移除按钮 -->
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 结算栏 -->
        <el-card style="height: 75px">
          <div style="float: right">
            <span> 总价：￥{{this.PriceSum}} </span>
            <el-button type="danger" @click="payment()">结算</el-button>
          </div>
        </el-card>
        <!-- 推荐 -->
        <h1 style="text-align: center; font-size: 20px">
          <i class="el-icon-shopping-cart-full" style="color: red"></i>
          购物车帮你选
        </h1>
        <div style="text-align: center; font-size: 10px">
          看看加购过该商品的人还喜欢哪些
        </div>
        <!-- 推荐商品 -->
        <el-card class="goods">
          <el-link href="/details">
            <img src="../assets/9.jpg" width="100%" height="180px" alt="" />
            <p>Apple iPhone 12 (A2404) 128GB 黑色</p>
            <p style="color: red">¥6799</p>
          </el-link>
        </el-card>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import { GetShopping, deleteId } from "../api/shopping";
import { getUserId } from "../Utils/auth";
export default {
  data() {
    return {
      tableData: [],
      id: getUserId(),
      PriceSum: 0,
    };
  },
  methods: {
    //移除购物车
    deleteRow(index, rows) {
      deleteId(rows[index].id).then((data) => {
        this.$message({ type: "success", message: data.data.msg });
        this.fetchData();
      });
    },

    handleSelectionChange(val) {
      this.PriceSum = 0;
      val.forEach((element) => {
        this.PriceSum += element.nowPrice * 1 * element.number;
      });
    },
    payment() {
      this.$router.push(`/payment?price=${this.PriceSum}`);
    },
    fetchData() {
      //加载购物车数据
      GetShopping(this.id).then((data) => {
        data.data.data.forEach((item) => {
          item.goodsImage = this.$host + item.goodsImage;
        });
        this.tableData = data.data.data;
      });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style>
.layout {
  width: 60%;
  margin: auto;
  min-height: calc(100vh - 120px);
}
.goods {
  width: 22%;
  height: 300px;
  float: left;
  margin-left: 2.2%;
  margin-top: 1%;
}
</style>